<template>
  <div style="height: auto; width: 100%;">
    <el-form :model="productForm" style="width: 100%;">
      <el-row :gutter="20">
        <!-- 销售 && 交叉销售配置 -->
        <el-col :span="12">
          <span class="idoo-span-title-font">薪资</span>
          <el-divider />
          <div style="margin-top: 20px;">
            <idoo-form-item label="构成" remark="产品包装环节可记录产品交付时的包装样式，具体包括所使用的箱子规格、材质，以及袋子的类型、尺寸等信息。">
              <el-select class="idoo-details-select">
              </el-select>
            </idoo-form-item>
            <idoo-form-item label="基本薪资" remark="在与客户沟通洽谈以及制作报价单的过程中，系统能够依据当前正在销售的产品，自动提示与之相关的系列产品。
            这有助于向客户全面展示产品阵容，挖掘潜在销售机会，同时丰富报价单内容，为客户提供更多选择">
              <el-select class="idoo-details-select">
              </el-select>
            </idoo-form-item>
            <idoo-form-item label="绩效" remark="在与客户沟通洽谈以及制作报价单的过程中，系统能够依据当前正在销售的产品，自动提示与之相关的系列产品。
            这有助于向客户全面展示产品阵容，挖掘潜在销售机会，同时丰富报价单内容，为客户提供更多选择">
              <el-select class="idoo-details-select">
              </el-select>
            </idoo-form-item>
            <idoo-form-item label="奖金" remark="在与客户沟通洽谈以及制作报价单的过程中，系统能够依据当前正在销售的产品，自动提示与之相关的系列产品。
            这有助于向客户全面展示产品阵容，挖掘潜在销售机会，同时丰富报价单内容，为客户提供更多选择">
              <el-select class="idoo-details-select">
              </el-select>
            </idoo-form-item>
          </div>
        </el-col>

        <!-- 报价相关配置 -->
        <el-col :span="12">
          <span class="idoo-span-title-font">社保&个税扣除</span>
          <el-divider />
          <div style="margin-top: 20px;">
            <idoo-form-item label="社保缴纳比例" remark="产品包装环节可记录产品交付时的包装样式，具体包括所使用的箱子规格、材质，以及袋子的类型、尺寸等信息。">
              <el-select class="idoo-details-select">
              </el-select>
            </idoo-form-item>
            <idoo-form-item label="个税扣除项" remark="产品包装环节可记录产品交付时的包装样式，具体包括所使用的箱子规格、材质，以及袋子的类型、尺寸等信息。">
              <el-select class="idoo-details-select">
              </el-select>
            </idoo-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span class="idoo-span-title-font">发放历史</span>
          <el-divider />
          <div>
            <idoo-form-item remark="产品包装环节可记录产品交付时的包装样式，具体包括所使用的箱子规格、材质，以及袋子的类型、尺寸等信息。">
              <div class="t-chart" v-bind="$attrs">
                <div class="t-chart" ref="echartRef" />
              </div>
            </idoo-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>


<script setup lang="ts">
import IdooFormItem from '@/components/base/form/formContent/index.vue';
import { getCurrentInstance, markRaw, nextTick, onMounted, onUnmounted, ref } from 'vue';



const productForm = {}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const { proxy } = getCurrentInstance() as any
const echartRef = ref<HTMLDivElement>()
const chartInstance = ref();
const initChart = () => {
  if (echartRef.value) {
    chartInstance.value = markRaw(proxy.$echarts.init(echartRef.value));
    const option = {
      xAxis: {
        type: 'category', // 明确声明为类目轴
        data: ['6月', '7月', '8月', '9月', '10月']
      },
      yAxis: {
        type: 'value' // 明确声明为数值轴
      },
      series: [
        {
          data: [3000, 5000, 8000, 10000, 12000],
          type: 'line',
          smooth: true
        }
      ]
    };
    chartInstance.value.setOption(option);
  }
};
const handleResize = () => {
  chartInstance.value?.resize();
};
onMounted(async () => {
  await nextTick(); // 等待 DOM 更新
  initChart();
  window.addEventListener('resize', handleResize);
});
onUnmounted(async () => {
  window.removeEventListener('resize', handleResize);
  chartInstance.value?.dispose();
});
</script>

<style scoped>
.el-divider--horizontal {
  margin: 5px 0 !important;
}

.idoo-span-title-font {
  font-weight: bolder !important;
  font-size: small;
}

.t-chart {
  width: 100%;
  height: 350px;
  /* 明确设置高度 */
}
</style>
